
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>支付号管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
  <style>
    body .layui-layer-demo .layui-layer-content {
      overflow: visible;
    }
  </style>
</head>
<body>

<div class="layui-fluid">

  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <div class="layui-form-item">

        <div class="layui-inline">
          <input type="text" name="name" placeholder="名称" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-inline">
          <select name="pay_mode">
            <option value="">收款方式</option>
            <option value="1">微信</option>
            <option value="2">支付宝</option>
          </select>
        </div>

        <div class="layui-inline">
          <select name="payment_type">
            <option value="">支付号类型</option>
            <option value="1">原生</option>
            <option value="2">米花</option>
            <option value="3">富友</option>
            <option value="4">汇付</option>
          </select>
        </div>

        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="layui-card-body">

      <table id="LAY-pop" lay-filter="LAY-pop"></table>

      <script type="text/html" id="table-useradmin-admin">
        <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs"  lay-text="支付号-{{d.id}}" lay-href="/tool/paymentNumberForm?id={{d.id}}"><i class="layui-icon layui-icon-edit"></i>编辑</a>
      </script>

      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="add">添加支付号</button>
        </div>
      </script>

      <script type="text/html" id="defaultTpl">
        <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="statusSwitch" {{ d.is_default == 1 ? 'checked' : '' }}>
      </script>

      <script type="text/html" id="baojingTpl">
        <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="是|否" lay-filter="baojingSwitch" {{ d.baojing_switch == 1 ? 'checked' : '' }}>
      </script>

    </div>
  </div>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>

<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','table'], function() {
    var $ = layui.$
            , form = layui.form
            , table = layui.table
            , admin = layui.admin;

    //监听搜索
      form.on('submit(LAY-user-back-search)', function (data) {
        var field = data.field;

        //执行重载
        table.reload('LAY-pop', {
          where: field
        });
      });


      table.render({
        elem: '#LAY-pop'
        , url: '/tool/paymentNumber' //模拟接口
        , response: {
          statusCode: 1
        }
        , toolbar: '#toolbarDemo'
        , defaultToolbar: false
        , page: true //开启分页
        , cols: [[
          {field: 'id', width: 80, title: 'ID'}
          , {field: 'name', title: '名称'}
          , {field: 'pay_mode', title: '收款方式',templet:function (d) {
              if (d.pay_mode == 1) {
                return '微信';
              } else if (d.pay_mode == 2) {
                return '支付宝';
              } else {
                return '';
              }
            }}
          , {
            field: 'payment_type', title: '支付号类型', templet: function (d) {
              if (d.payment_type == 1) {
                return '原生';
              } else if (d.payment_type == 2) {
                return '米花';
              } else if (d.payment_type == 3) {
                return '富友';
              } else if (d.payment_type == 4) {
                return '汇付';
              } else {
                return '';
              }
            }
          }
          , {
            field: 'pay_style', title: '起吊形式', templet: function (d) {
              if (d.pay_style == 1) {
                return 'H5';
              } else if (d.pay_style == 2) {
                return 'APP';
              } else {
                return '';
              }
            }
          }
          , {field: 'status', title: '默认', width: 85, templet: '#defaultTpl', unresize: true, align: 'center'}
          , {field: 'baojing_minute', title: '未支付报警时长（分）', width: 200, align: 'center', edit:'text' }
          , {field: 'baojing_switch', title: '报警开关', width: 150, templet: '#baojingTpl', unresize: true, align: 'center'}
          , {field: 'create_time', title: '创建时间'}
          , {title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}
        ]]
      });


    //监听单元格编辑
    table.on('edit(LAY-pop)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
      admin.req({
        url: '/tool/baojing'
        , type: "POST"
        , data: {'id':  obj.data.id, 'baojing_minute': obj.value}
        , done: function (res) {
          layer.msg('设置成功', {icon: 1, time: 1000}, function () {
          });
        }, not_finish: function (res) {
          layer.msg(res.msg);
        }
      });
    });

    form.on('switch(statusSwitch)', function (data) {
      layer.confirm('请确保每种收款方式，都有一个默认的支付号，且每种收款方式有且只有一个默认，确定切换状态吗？', {
        btn: ['确定','取消'] //按钮
      }, function(){
        var value = 1;
        if (data.elem.checked === false) {
          value = 0;
        }
        admin.req({
          url: '/tool/setDefaultPayment'
          , type: "POST"
          , data: {'id': data.value, 'value': value}
          , done: function (res) {
            layer.msg('设置成功', {icon: 1, time: 1000}, function () {
              window.location.reload();
            });
          }, not_finish: function (res) {
            layer.msg(res.msg);
          }
        });

      }, function(){
        window.location.reload();
      });
    });

    form.on('switch(baojingSwitch)', function (data) {
      layer.confirm('确定切换支付报警开关嘛？', {
        btn: ['确定','取消'] //按钮
      }, function(){
        var value = 1;
        if (data.elem.checked === false) {
          value = 0;
        }
        admin.req({
          url: '/tool/baojingSwitch'
          , type: "POST"
          , data: {'id': data.value, 'value': value}
          , done: function (res) {
            layer.msg('设置成功', {icon: 1, time: 1000}, function () {
              window.location.reload();
            });
          }, not_finish: function (res) {
            layer.msg(res.msg);
          }
        });

      }, function(){
        window.location.reload();
      });
    });




    //监听行工具事件
    table.on('tool(LAY-pop)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
      }
    });




    //头工具栏事件
    table.on('toolbar(LAY-pop)', function (obj) {
      switch (obj.event) {
        case 'add':
          layer.open({
            type: 1,
            title: '添加支付号',
            offset: '15px',
            area: ['40%', '280px'],
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            shadeClose: true, //开启遮罩关闭
            content: $('.hot-show'),
            btn: ['确定', '取消']
            , yes: function (index, layero) {
              var pay_mode = $("#pay_mode").val();
              var payment_type = $("#payment_type").val();
              window.location.href = "/tool/paymentNumberForm?pay_mode=" + pay_mode + "&payment_type=" + payment_type;
            }
          });
          break;
      }
    });
  });
</script>


</body>
<div class="hot-show" style="display: none;">

  <form class="layui-form" style="padding: 10px;" action="">

    <div class="layui-form-item">
      <label class="layui-form-label">收款方式</label>
      <div class="layui-input-block">
        <select name="pay_mode" id="pay_mode">
          <option value="1">微信</option>
          <option value="2">支付宝</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">支付号类型</label>
      <div class="layui-input-block">
        <select name="payment_type" id="payment_type">
          <option value="1">原生</option>
          <option value="2">米花</option>
          <option value="3">富友</option>
        </select>
      </div>
    </div>
  </form>

</div>
</html>

